<template>
  <starModal :ref="ref" :config="config" @click="click">
      <starTabs :config="tabsConfig">
        <json-editor slot="0"
          :config="jsonConfig.values"
          :code="dataSet.currentIns.values"
          style="height: 65vh"
          @change="dataSet.currentIns.values = $event"
        ></json-editor>
        <json-editor slot="1"
          :config="jsonConfig.hier"
          :code="dataSet.currentIns.hier"
          style="height: 65vh"
          @change="dataSet.currentIns.hier = $event"
        ></json-editor>
        <json-editor slot="2"
          :config="jsonConfig.others"
          :code="dataSet.currentIns.others"
          style="height: 65vh"
          @change="dataSet.currentIns.others = $event"
        ></json-editor>
        <json-editor slot="3"
          :config="jsonConfig.web"
          :code="dataSet.currentIns.web"
          style="height: 65vh"
          @change="dataSet.currentIns.web = $event"
        ></json-editor>
        <json-editor slot="4"
          :config="jsonConfig.all"
          ref="json"
          :code="dataSet.currentIns"
          style="height: 65vh"
          @change="dataSet.currentIns = $event"
        ></json-editor>
      </starTabs>
  </starModal>
</template>

<script>
const ref = "jsonModal";
export default {
  name: ref,
  inject: ["anc"],
  data() {
    return {
      ref,
      show: false,
      width: 600,
      tabname: "1",
      loading: false,
      config: {
        show: false,
        title: "编辑",
        height: 'auto',
      },
      tabsConfig:{
        name:'json',
        value:'0',
        type:'card',
        style:{height:'60vh'},
        menu:false,
        menus:[],
        extra:{
            icon:'',
            style:{},
            items:[
              
            ],
        },
        tabs:[
            {
                label:'values',
                menu:true
            },
            {
                label:'hier',
                menu:false
            },
            {
                label:'others',
                menu:false
            },
            {
                label:'web',
                menu:false
            },
            {
                label:'all',
                menu:false
            }
        ]
      },
      jsonConfig: {
        values: { error: false },
        hier: { error: false },
        others: { error: false },
        web: { error: false },
        all: { error: false },
      },
    };
  },
  props: {
    dataSet: {
      default: () => {
        return {};
      },
    },
  },
  watch: {},
  computed: {
    error() {
      let error = false;
      Object.keys(this.jsonConfig).map((key) => {
        if (this.jsonConfig[key].error) {
          error = true;
        }
      });
      return error;
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.$set(this.anc.vms, this.ref, this);
    });
  },
  methods: {
    click(btn, config) {
      if (btn.text === "确定") {
        btn.loading = true;
        config.loading = true;
        if (this.$refs.json.error) {
          console.log(this.$refs.json.config.error, this.dataSet.currentIns);
        }
          btn.loading = false;
          config.loading = false;
      }
      this.config.show = false;
    },
  },
};
</script>
<style scoped lang="scss">
$top: 40px;
.content {
  position: relative;
  width: 100%;
  height: 70vh;
}
</style>